<template>
  <div>
    <div class="content">
      <div class="myNavCss">
        <myNav :thisNav="'2'" />
      </div>
      <div class="myInfo">
        <p class="font14 cl333 bold font14 pb10 border">合作历史</p>
        <div>
          <template v-if="lists.length > 0">
            <div class="oneList" v-for="item in lists">
              <div class="clearfix">
                <div class="fl font12">
                  <span class="given given_n" :class="item.requirement.type === 1 ? 'givenScc' : ''">{{ item.requirement.type === 1 ? '需要' : '提供' }}</span>
                  <span class="given_right mr10 cl999">{{ item.requirement.type === 1 ? '我需要' : '我提供' }} {{ item.requirement.requirementTitle }}</span>
                </div>
                <div class="fr font12" style="margin-top: 5px;">
                  <span class="cl999">{{ item.requirement.createTime.slice(0,10) }}</span>
                  <img src="@/assets/image/liulian_icon.png" class="common_icon middle ml8">
                  <span class="cl999">{{ item.requirement.viewCount }}</span>
                </div>
              </div>
              <div class="clearfix">
                <div class="fl">
                  <p class="mt20 pb10">
                    <a class="mr10 requirementDesc" style="white-space: pre-wrap;" @click="toDetails(item.requirement.id)" href="javascript:void(0)">{{ item.requirement.requirementDesc ||  item.requirement.requirementTitle}}</a>
                  </p>
                </div>
              </div>
              <div>
                <p class="notice_content_list_see font12 cl999">
                  <img src="https://www.uqudao.com/static/web/img/common/mobile_icon.png" class="common_icon">
                  <span class="ml8 mr10">{{ item.requirement.requirementContactMobile || '用户未填写' }}</span>
                  <img src="https://www.uqudao.com/static/web/img/common/wechat_icon.png" class="common_icon">
                  <span class="ml8 mr10">{{ item.requirement.requirementWechat || '用户未填写' }}</span>
                </p>
              </div>
              <div class="demandcon">
                <div class="ant-avatar" v-if="item.requirement.user"><img :src="item.requirement.user.avatar || 'https://www.uqudao.com/ImageCrop?src=https://www.uqudao.com/files/avatar/avatar_404.png&amp;w=50&amp;h=50'"></div>
                <div class="demandcon-text" v-if="item.requirement.user">
                  <span>{{ item.requirement.user.nickname || item.requirement.user.realName }}</span>
                  <template v-if="item.requirement.type === 2">
                    <span v-if="item.requirement.user.companyName">{{ item.requirement.user.companyName }} · {{ item.requirement.user.jobTitle }}</span>
                  </template>
                </div>
              </div>
            </div>

            <div style="display: flex">
              <el-pagination
                  style="margin-left: auto"
                  layout="prev, pager, next" :total="totalIndex" background
                  :page-size="requirementData.pageSize"
                  v-model:current-page="requirementData.pageNo"
                  @current-change="handleCurrentChange"
              ></el-pagination>
            </div>
          </template>

          <template v-else>
            <el-empty :image-size="200" />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import myNav from '@/components/myNav/index.vue'
import { requirementLog } from '@/api/api'
import { ref } from "vue";
import {useRouter} from "vue-router";
const router = useRouter();
interface ListInterface {
  requirementTitle: string
  type: number
  user: any
  createTime: string
  domainList: any
  areaList: any
  id:any
  companyName: string
  jobTitle: string
  viewCount: number
  requirementDesc: string
  status: number
  requirementContactMobile: string
  requirementWechat: string
}
const totalIndex = ref(0)
const lists = ref<ListInterface[]>([])
const requirementData = ref({
  pageNo: 1,
  pageSize: 10
})
const getList = () => {
  requirementLog(requirementData.value).then((res:any) => {
    lists.value = res.data.lists
    totalIndex.value = res.data.count
  })
}
getList()
const handleCurrentChange = (val: number) => {
  requirementData.value.pageNo = val
  getList()
}
const toDetails = (id:any) => {
  router.push('/details?id=' + id)
}
</script>
<style scoped>
.demandcon{
  display: flex;
  align-items: center;
  padding-bottom: 0.75rem;
  color: #999;
  margin-top: 15px;
}
.ant-avatar {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background: #ccc;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
}
.demandcon-text span{
  margin-left: 0.5rem;
}
.ant-avatar img{
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.requirementDesc:hover{
  color: #409eff;
}
a {
  color: #333;
  text-decoration: none;
}
.mt20 {
  margin-top: 20px;
}
.oneList{
  padding: 5px 0;
}
p{
  margin: 0;
}
.content{
  padding: 30px 0;
  position: relative;
  overflow: hidden;
  width: 1200px;
  margin: auto;
  box-sizing: border-box;
  display: flex;
}
.myNavCss{
  width: calc(32% - 22px);
}
.myInfo{
  width: 68%;
  background: #fff;
  margin-left: 22px;
  padding: 20px 30px;
}
.mb10 {
  margin-bottom: 10px;
}
.pb10{
  padding-bottom: 10px;
}
.bold {
  font-weight: bold;
}
.font14 {
  font-size: 14px;
}
.cl333 {
  color: #333;
}
.border {
  border-bottom: 1px solid #e4e4e4;
}
.clearfix {
  zoom: 1;
}
.font12 {
  font-size: 12px;
}
.fl {
  float: left;
}
.given {
  color: #fff;
  padding: 2px 8px;
  margin-right: 13px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  font-size: 12px;
}
.given_n {
  background-color: #409eff;
}
.given_right {
  position: relative;
  left: -5px;
}
.mr10 {
  margin-right: 10px;
}
.cl999 {
  color: #999;
}
.fr {
  float: right;
}
.clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
}
.common_icon {
  width: 14px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.middle {
  vertical-align: middle;
  display: inline-block;
}
.ml8 {
  margin-left: 8px;
}
.givenScc {
  background-color: #8ac4ff;
}
.notice_content_list_see {
  background: #f3f3f3;
  padding: 3px 10px;
  border-radius: 4px;
}
</style>